<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>试题详情</title>
    <link rel="stylesheet" th:href="@{/css/menu.css}" >
    <style>


		body{
		    background-color: #f3f2f2; /*背景色*/
		    font-family: 'Microsoft YaHei', Arial, sans-serif; /*字体*/
		}
		h1{
		    text-align: center; /*标题居中*/
		    font-size: 36px; /*标题字号*/
		    color: #363636; /*标题文字颜色*/
		    margin-top: 40px; /*标题与上方内容的距离*/
		}
		hr{
		    height: 1px; /*横向分割线粗细*/
		    background-color: #ccc; /*横向分割线颜色*/
		    border: none; /*去除边框*/
		    margin-top: 20px; /*分割线与上方内容的距离*/
		}
		form{
		    margin: 5px auto; /*表单居中*/
		    width: 500px; /*表单宽度*/
		    background-color: #fff; /*表单背景色*/
		    padding: 30px; /*表单内边距*/
		    border-radius: 8px; /*表单圆角*/
		    box-shadow: 0 0 10px rgba(0,0,0,.1); /*表单阴影*/
		}
		textarea{
		    display: block; /*将输入框设置为块级元素，以便换行*/
		    width: 100%; /*输入框宽度*/
		    margin-bottom: 20px; /*输入框与下方内容的距离*/
		    font-size: 16px; /*输入框字号*/
		    padding: 10px; /*输入框内边距*/
		    border: none; /*去除输入框边框*/
		    border-radius: 8px; /*输入框圆角*/
		    box-shadow: 0 0 5px rgba(0,0,0,.1); /*输入框阴影*/
		}
		#content{
		    height:10vh;
		}
		.radio-group {
          display: flex;
          justify-content: center;
          gap: 5vh;
          margin-bottom: 20px;
        }

        .radio-group label {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          padding: 8px 16px;
          background-color: #f1f1f1;
          color: #333;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 0.3s;
        }

        .radio-group input[type="radio"] {
          display: none;
        }

        .radio-group input[type="radio"]:checked + label {
          background-color: #333;
          color: #fff;
        }
		input[type="submit"] {
		  display: block; /* 将按钮设置为块级元素以占据整行 */
		  background-color: #333;
		  color: #fff;
		  font-size: 15px;
		  text-transform: uppercase;
		  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
		  transition: all 0.3s ease-in-out;
		  cursor: pointer;
		  padding: 14px;
		  border-radius: 20px;
		  border: none;
		  margin: 0 auto; /* 使用 margin 属性将按钮水平居中 */
		  width:20%;
		}

		input[type="submit"]:hover{
		  background-color: #fff;
		  color: #333;
		  border: 2px solid #333;
		}

	</style>


</head>
<body>
<div th:replace="~{commons/menu::common-menu}"></div>

<h1>试题详情</h1>
<hr />

    <form th:action="@{/questions/get}" method="get">
        <textarea th:text="${question.question}" id="content" placeholder="这里是试题内容"></textarea><br/>
    </form>
    <form >
        <div class="radio-group">
            <input type="radio" id="option1" name="radio" value="option1" >
            <label for="option1" th:text="${question.sa}"></label>

            <input type="radio" id="option2" name="radio" value="option2" >
            <label for="option2" th:text="${question.sb}"></label>

            <input type="radio" id="option3" name="radio" value="option3" >
            <label for="option3" th:text="${question.sc}"></label>

            <input type="radio" id="option4" name="radio" value="option4" >
            <label for="option4" th:text="${question.sd}"></label>
        </div>

        <input type="submit" value="提交" onclick="return confirm('请确认')">
    </form>

<script>
        function goBack() {
          window.history.go(-1);
        }
    </script>
</body>
</html>